<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<link href="js/jquery-easyui-1.5.4.2/themes/default/easyui.css" rel="stylesheet">
		<link href="js/jquery-easyui-1.5.4.2/themes/icon.css" rel="stylesheet">
		<script src="js/jquery-1.12.4.js"></script>
		<script src="js/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
		<script src="js/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
		<script src="js/config.js"></script>
		<style>
			body {
				background: #ad5389;
				/* fallback for old browsers */
				background: linear-gradient(to right, #3c1053, #ad5389);
			}

			.container {
				margin: 0 auto;
				width: 400px;
				text-align: center;
				padding-top: 100px;
			}

			h1 {
				text-align: center;
				color: black;
				font-family: Arial, sans-serif;
				font-size: 24px;
				margin-bottom: 20px;
			}

			.login-panel {
				border: 1px solid #ccc;
				padding: 20px;
				border-radius: 10px;
				
			}

			.login-ctl {
				margin-top: 20px;
				text-align: center;
			}

			.login-ctl a {
				display: inline-block;
				margin-right: 10px;
				font-size: 14px;
				color: #fff;
				border: none;
				border-radius: 8px;
				padding: 6px 12px;
				text-align: center;
				text-decoration: none;
			}

			.login-ctl a:hover {
				background-color: rgb(237, 221, 22);
				color: rgb(95, 76, 194);
			}

			.p-name {
				margin-top: 40px;
			}

			.p-name input {
				width: 100%;
				padding: 10px;
				font-size: 16px;
				border-radius: 4px;
				border: 1px solid #ccc;
			}

			.p-name input:focus {
				outline: none;
				border-color: #80bdff;
				box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
			}

			.p-password {
				margin-top: 20px;
			}

			.p-password input {
				width: 100%;
				padding: 10px;
				font-size: 16px;
				border-radius: 4px;
				border: 1px solid #ccc;
			}

			.p-password input:focus {
				outline: none;
				border-color: #80bdff;
				box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
			}

			.easyui-panel {
				height: 200px;
			}

			.easyui-linkbutton {
				background: black;
				
			}

			.title {
				color: black;
				font-size: 18px;
				font-weight: 200;
			}

			.title span {
				border-bottom: 3px solid rgb(237, 221, 22);
			}


			input:hover {
				border-bottom-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="easyui-panel login-panel" data-options="width:'400px'">
				<div class="title"><span>登录</span></div>
				<form id="login_form">
					<p><input class="easyui-textbox"
							data-options="prompt:'用户名',iconCls:'icon-man',iconAlign:'left',width:'100%',height:'50px'"
							name="username"></p>
					<p><input class="easyui-passwordbox"
							data-options="prompt:'密码',iconAlign:'left',width:'100%',height:'50px'" name="password"></p>
				</form>
				<div class="login-ctl">
					<a class="easyui-linkbutton" data-options="width:'30%',height:'40px'" href="js/zhuce.html"
						id="register_btn" style="color: white;">注册</a>
					<a class="easyui-linkbutton" data-options="width:'30%',height:'40px'" href="#" id="login_btn"
						style="color: white;">登录</a>

				</div>
			</div>
		</div>

	</body>
	<script>
		$('#login_btn').click(function() {
			$.post(Config.api + 'auth', $('#login_form').serialize())
				.done(function(data) {
					localStorage.setItem(Config.tokenName, 'Bearer ' + data.token);
					location.href = 'index.html';
				})
				.fail(function(xhr) {
					$.messager.alert('登录失败', JSON.parse(xhr.responseText).msg);
				});
		});
	</script>
	<div style="text-align: center;"><h3>202335720142-张坚平</h3></div>
</html>
